<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="98px">
      <el-form-item prop="searchTime" label="年月">
        <el-date-picker size="small"
                        v-model="queryParams.searchTime"
                        type="month"
                        value-format="yyyy-MM"
                        @change="handleQuery"
                        placeholder="选择年月" style="width:250px"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>


    <el-table border stripe v-loading="loading" :data="staffPayrollList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column fixed label="在编人员工号" align="center" prop="jobnumber"/>
      <el-table-column fixed label="姓名" align="center" prop="nickName"/>
      <el-table-column label="工资年月" align="center" prop="salaryyearmonth" width="120">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.salaryyearmonth, '{y}-{m}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="岗位名称" align="center" prop="position"/>
      <el-table-column label="薪级名称" align="center" prop="salary" width="120"/>
      <el-table-column label="岗位工资" align="center" prop="positionSalary"/>
      <el-table-column label="薪级工资" align="center" prop="payWages"/>
      <el-table-column label="基础性绩效工资" align="center" prop="basicPerformancePay"/>
      <el-table-column label="奖励性绩效工资" align="center" prop="incentivizedPerformancePay"/>
      <el-table-column label="基础性绩效奖" align="center" prop="basicPerformanceAward"/>
      <el-table-column label="独生子女保健" align="center" prop="oneChildCare"/>
      <el-table-column label="住房补贴" align="center" prop="housingSubsidies"/>
      <el-table-column label="加班工资" align="center" prop="overtimePay"/>
      <el-table-column label="应发工资" align="center" prop="wagesPayable"/>
      <el-table-column label="实扣数" align="center" prop="actualDeduction"/>
      <el-table-column label="实发数" align="center" prop="actualSalary"/>
      <el-table-column label="是否确定" align="center" width="110" prop="auditStatus">
        <template slot-scope="{row}">
          <el-tag
            type="success"
            v-show="row.auditStatus==='Y'"
          >
            确定
          </el-tag>
          <el-tag
            type="info"
            v-show="row.auditStatus==='N'"
          > 未确定
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding" width="230">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-check"
            @click="viewSelf(scope.row)"
            v-hasPermi="['compensationManagement:viewSelfStaffpayroll:query']"
          >查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />


    <!-- 添加或修改工资表对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="850px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="在编人员工号"  prop="jobnumber">
          <el-input v-model="form.jobnumber" :disabled="true" />
        </el-form-item>
        <el-form-item label="姓名" prop="nickName">
          <el-input v-model="form.nickName" :disabled="true" />
        </el-form-item>
        <el-form-item label="工资年月" prop="salaryyearmonth">
          <el-date-picker clearable
                          v-model="form.salaryyearmonth"
                          type="date"
                          value-format="yyyy-MM"
                          placeholder="请选择工资年月"
                          :disabled="true"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="岗位名称" prop="position">
          <el-input v-model="form.position" :disabled="true"/>
        </el-form-item>
        <el-form-item label="薪级名称" prop="salary">
          <el-input v-model="form.salary" :disabled="true" />
        </el-form-item>
        <el-row>
          <el-col :span="10" style="margin:5px 20px;padding:5px">
            <el-tag type="success">收入项</el-tag>
            <el-form-item label="岗位工资" prop="positionSalary">
              <el-input-number v-model="form.positionSalary"
                               :precision="2"
                               controls-position="right" :min="0"
                               :step="0.1"
                               :disabled="true"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="薪级工资" prop="payWages">
              <el-input-number v-model="form.payWages" :disabled="true" :precision="2" controls-position="right" :min="0" :step="0.1"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="基础性绩效工资" prop="basicPerformancePay">
              <el-input-number v-model="form.basicPerformancePay" :precision="2"
                               controls-position="right" :min="0"
                               :step="0.1"
                               :disabled="true"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="奖励性绩效工资" prop="incentivizedPerformancePay">
              <el-input-number v-model="form.incentivizedPerformancePay" :precision="2"
                               controls-position="right"
                               :min="0"
                               :step="0.1"
                               :disabled="true"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="基础性绩效奖" prop="basicPerformanceAward">
              <el-input-number v-model="form.basicPerformanceAward" :precision="2"
                               controls-position="right" :min="0"
                               :step="0.1"
                               :disabled="true"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="独生子女保健" prop="oneChildCare">
              <el-input-number v-model="form.oneChildCare"
                               :precision="2"
                               controls-position="right" :min="0" :step="0.1"
                               :disabled="true"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="住房补贴" prop="housingSubsidies">
              <el-input-number v-model="form.housingSubsidies"
                               :precision="2"
                               controls-position="right" :min="0"
                               :step="0.1"
                               :disabled="true"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="加班工资" prop="overtimePay">
              <el-input-number v-model="form.overtimePay"
                               :precision="2"
                               controls-position="right" :min="0" :step="0.1"
                               :disabled="true"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="应发工资" prop="wagesPayable">
              <el-input-number :disabled="true" v-model="form.wagesPayable" :precision="2" controls-position="right"
                               :min="0"
                               :step="0.1"
              ></el-input-number>
            </el-form-item>
          </el-col>

          <el-col :gutter="2" :span="10" style="margin:5px;padding:5px">
            <el-tag type="danger">扣除项</el-tag>
            <el-form-item
              v-for="(domain, index) in form.floatingItems"
              :label="domain.deductionsType"
              :prop="'floatingItems.' + index + '.cost'"
              :key="domain.id"
            >
              <el-row :gutter="4">
                <el-col :span="5">
                  <el-input-number :precision="2" v-model="domain.cost"
                                   controls-position="right"
                                   :min="0"
                                   :step="0.1"
                                   :disabled="true"
                  ></el-input-number>
                  <el-tag style="float:right;" v-if="domain.isRate=='Y'" size="mini" type="primary">百分比项目</el-tag>
                  <!--                  <el-input-number v-if="domain.isRate=='Y'" :precision="4" v-model="domain.rate"
                                                     controls-position="right"
                                                     :min="0"
                                                     :step="0.1"
                                    ></el-input-number>-->
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="实扣数" prop="actualDeduction">
              <el-input-number :disabled="true" v-model="form.actualDeduction" :precision="2" controls-position="right"
                               :min="0"
                               :step="0.1"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-divider></el-divider>
          <el-col :offset="5">
            <el-form-item label="实发数" prop="actualSalary">
              <el-input-number :disabled="true" v-model="form.actualSalary" :precision="2" controls-position="right"
                               :min="0"
                               :step="0.1"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {
  getSelfStaffPayroll,
  getStaffPayroll,
  listSelfStaffPayroll
} from '@/api/compensationManagement/staffPayroll'
import { treeselect } from '@/api/system/dept'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { listStaffPayrollLog } from '@/api/compensationManagement/staffPayrollLog'

export default {
  name: 'ViewSelfStaffPayroll',
  components: { Treeselect },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 工资表表格数据
      staffPayrollList: [],
      // 部门树选项
      deptOptions: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 历史记录
      openLog: false,
      // 历史记录标题
      logTitle: '',
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        jobnumber: null,
        nickName: null,
        userEmployeeStatus: null,
        userPoliticalOutlook: null,
        userDeptId: null,
        searchTime: undefined
      },
      // 表单参数
      form: {
        floatingItems: []
      },
      // 表单校验
      rules: {},
      //员工状态选项
      employeeStatusOptions: [
        {
          id: 1,
          value: '试用',
          label: '试用'
        },
        {
          id: 2,
          value: '在职',
          label: '在职'
        },
        {

          id: 3,
          value: '退休',
          label: '退休'
        },
        {
          id: 4,
          value: '离职',
          label: '离职'
        }
      ],
      //政治面貌选项
      mianmaoOptions: [
        {
          id: 1,
          value: '党员',
          label: '党员'
        },
        {
          id: 2,
          value: '团员',
          label: '团员'
        },
        {
          id: 3,
          value: '群众',
          label: '群众'
        },
        {
          id: 4,
          value: '其他',
          label: '其他'
        }

      ],
      //历史记录列表
      historyList: [],
      //strList
      strList: null
    }
  },
  created() {
    this.getList()
    this.getTreeselect()
  },
  methods: {
    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then(response => {
        this.deptOptions = response.data
      })
    },
    /** 查询工资表列表 */
    getList() {
      this.loading = true
      listSelfStaffPayroll(this.queryParams).then(response => {
        this.staffPayrollList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        staffpayrollId: null,
        jobnumber: null,
        nickName: null,
        salaryyearmonth: null,
        position: null,
        salary: null,
        positionSalary: null,
        payWages: null,
        basicPerformancePay: null,
        incentivizedPerformancePay: null,
        basicPerformanceAward: null,
        oneChildCare: null,
        housingSubsidies: null,
        overtimePay: null,
        wagesPayable: null,
        deductionsPart: null,
        actualDeduction: null,
        actualSalary: null,
        auditStatus: '0',
        floatingItems: [
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'id': 1,
            'deductionsType': '住房公积金',
            'deductionsCoding': 'Housing accumulation fund',
            'isRate': 'Y',
            'cost': 0.00,
            'rate': 0.0000
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'id': 2,
            'deductionsType': '养老保险',
            'deductionsCoding': 'Endowment Insurance',
            'isRate': 'Y',
            'cost': 0.00,
            'rate': 0.0000
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'id': 4,
            'deductionsType': '医疗保险',
            'deductionsCoding': 'Medical Insurance',
            'isRate': 'N',
            'cost': 0.00,
            'rate': 0.0000
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'id': 5,
            'deductionsType': '失业保险',
            'deductionsCoding': 'Unemployment Insurance',
            'isRate': 'N',
            'cost': 0.00,
            'rate': 0.0000
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'id': 6,
            'deductionsType': '住房公积金',
            'deductionsCoding': 'Housing ProvidentFund',
            'isRate': 'Y',
            'cost': 0.00,
            'rate': 0.0000
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'id': 7,
            'deductionsType': '个人所得税',
            'deductionsCoding': 'IndividualIn ComeTax',
            'isRate': 'N',
            'cost': 0.00,
            'rate': 0.0000
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'id': 8,
            'deductionsType': '工会费',
            'deductionsCoding': 'labor Dues',
            'isRate': 'N',
            'cost': 0.00,
            'rate': 0.0000
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'id': 9,
            'deductionsType': '扣病假工资',
            'deductionsCoding': 'Deduction SickPay',
            'isRate': 'N',
            'cost': 0.00,
            'rate': 0.0000
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'id': 10,
            'deductionsType': '扣事假工资',
            'deductionsCoding': ' DeductionPersona lLeave Salary',
            'isRate': 'N',
            'cost': 0.00,
            'rate': null
          },
          {
            'searchValue': null,
            'createBy': null,
            'createTime': null,
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'params': {},
            'id': 11,
            'deductionsType': '扣哺乳假工资',
            'deductionsCoding': 'Deduction Nursing Leave Wages',
            'isRate': 'N',
            'cost': 0.00,
            'rate': null
          }]
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.staffpayrollId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },

    //查看自身工资
    viewSelf(row) {
      this.reset()
      const staffpayrollId = row.staffpayrollId || this.ids
      getSelfStaffPayroll(staffpayrollId).then(response => {
        this.form = response.data
        this.form.floatingItems = response.data.deductionsPartSql
        this.open = true
        this.title = '修改工资表'
      })
    }
  }
}
</script>

<style>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 480px;
}
</style>
